import React, { Component } from 'react';
import { Layout } from 'antd';
import { CollapseType } from 'antd/lib/layout/Sider';
import { bindAll } from 'underscore'
import { ipcRenderer } from 'electron'
import { clear, cleanUp, undo, zoom, getxml } from '../../containers/methed';
import { ChildProcessWithoutNullStreams } from 'child_process';
import { ipctype } from '../../main/interface';
import { PauseCircleOutlined } from '@ant-design/icons';
const { Sider } = Layout;

type Props = {
  fileState: boolean,
  setfileState: React.Dispatch<React.SetStateAction<boolean>>,
  coderun: () => Promise<any>,
  svgchange: (b: boolean) => void,
  codechange: (b: boolean) => void,
  workspace: () => Blockly.WorkspaceSvg | undefined,
  ls: ChildProcessWithoutNullStreams | null,
  pythonvalues?: () => string
};

type State = {
  collapsible: boolean,
}


export default class Mysider extends Component<Props, State> {
  constructor(props: Props) {
    super(props)
    this.state = {
      collapsible: true,

    }
    bindAll(this, 'onCollapse', 'clickfile', 'changeSvg', 'savefile')
  }

  onCollapse(_collapsed: boolean, _type: CollapseType) {
  }

  clickfile() {

  }

  changeSvg(t: boolean) {
    const { workspace } = this.props
    const w = workspace()
    if (w) {
      zoom(w, t)
    }
  }

  savefile() {
    const { pythonvalues } = this.props
    const values = pythonvalues ? pythonvalues() : ''
    const xml = getxml()
    ipcRenderer.send(ipctype['savefile'], xml, values)
  }

  render() {
    const { changeSvg } = this
    const { coderun, codechange } = this.props
    return <Sider id="Sider" collapsed={true} collapsible={false} defaultCollapsed={true} collapsedWidth={60}>
      <div className="content">
        <ul className="actions-container">
          <li className="action-item" onClick={this.savefile} title="文件"  >
            <svg className="icon action-label" aria-hidden="true" >
              <use xlinkHref="#iconwenjian"></use>
            </svg>
          </li>
          <li className="action-item" >
            {
              this.props.ls ? <PauseCircleOutlined className="action-label" title="停止程序" onClick={() => {
                if (this.props.ls) {
                  this.props.ls.kill()
                }
              }} /> : <svg className="icon action-label" aria-hidden="true" onClick={() => coderun()}  >
                  <use xlinkHref="#iconbofang"></use>
                </svg>
            }


          </li>
          <li className="action-item" onClick={() => undo(false)} title="撤销" >
            <svg className="icon action-label" aria-hidden="true" >
              <use xlinkHref="#iconhoutui"></use>
            </svg>
          </li>
          <li className="action-item" onClick={() => undo(true)} title="取消撤销" >
            <svg className="icon action-label" aria-hidden="true" >
              <use xlinkHref="#iconqianjin"></use>
            </svg>
          </li>
          <li className="action-item" onClick={() => changeSvg(true)} title="增大图形" >
            <svg className="icon action-label" aria-hidden="true" >
              <use xlinkHref="#iconfangda1"></use>
            </svg>
          </li>
          <li className="action-item" onClick={() => changeSvg(false)} title="减小图形" >
            <svg className="icon action-label" aria-hidden="true" >
              <use xlinkHref="#iconsuoxiao"></use>
            </svg>
          </li>
          <li className="action-item" onClick={() => clear()} title="清理图形" >
            <svg className="icon action-label" aria-hidden="true" >
              <use xlinkHref="#iconshanchu"></use>
            </svg>
          </li>
          <li className="action-item" onClick={() => cleanUp()} title="调整图形" >
            <svg className="icon action-label" aria-hidden="true" >
              <use xlinkHref="#iconjuzhong"></use>
            </svg>
          </li>
          <li className="action-item" onClick={() => codechange(true)} title="增大文字" >
            <svg className="icon action-label" aria-hidden="true" >
              <use xlinkHref="#iconfangda"></use>
            </svg>

          </li>
          <li className="action-item" onClick={() => codechange(false)} title="减小文字" >
            <svg className="icon action-label" aria-hidden="true" >
              <use xlinkHref="#iconsuoxiao1"></use>
            </svg>
          </li>
          <li className="action-item" title="返回video" >
            <a href={location.pathname}>
              <svg className="icon action-label" aria-hidden="true" >
                <use xlinkHref="#iconhome"></use>
              </svg>
            </a>
          </li>
        </ul>
      </div>
    </Sider>
  }

}

